import React from 'react'
import { Carousel, WingBlank } from 'antd-mobile';
import './Mycarousel.css'

class Mycarousel extends React.Component {
    render() {
        return (
            <div style={{margin:'0 auto',marginBottom:'20px'}}>
                <div style={{ fontSize: '1.5em', fontWeight: 'bold' }}>LifeStyle</div>
            <WingBlank>
                <Carousel
                    autoplay={true}
                    infinite={true}
                >
                    <img
                        src={`https://tse4-mm.cn.bing.net/th/id/OIP.IuCeDpDLnsvM9hJeVZnI7AHaE8?w=288&h=192&c=7&o=5&dpr=2&pid=1.7`}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top',borderRadius:'20px' }}
                        onLoad={() => {
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                        }}
                    />
                    <img
                        src={`https://tse4-mm.cn.bing.net/th/id/OIP.12hoOepWGjn-wJ5vSyn4NQHaE_?w=286&h=193&c=7&o=5&dpr=2&pid=1.7`}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top',borderRadius:'20px' }}
                        onLoad={() => {
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                        }}
                    />
                    <img
                        src={`https://tse3-mm.cn.bing.net/th/id/OIP.8qbjoxgXp4M9ChbTCY3TdAHaE8?w=280&h=187&c=7&o=5&dpr=2&pid=1.7`}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' ,borderRadius:'20px'}}
                        onLoad={() => {
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                        }}
                    />
                   
                </Carousel>
            </WingBlank>
            
            </div>
        );
    }
}

export default Mycarousel
